<template>
  <div class=" padlr320 pad-t20">
    <div class="table-box pad20 min-w1280">
      <div class="table-tit pad-b20">请确认订单信息</div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :style="{ 'line-height': '20px' }"
      >
        <el-table-column label="商品信息" >
          <template #header="{ column }">
            <span class="columnSty">
              {{ column.label }}
            </span>
          </template>
          <el-table-column prop="name" label="普通商标" width="654px">
            <template #default="{ row }">
              <div class="flex-a">
                <el-image
                  style="width: 148px; height: 98px"
                  :src="getAssetsImages(row.image)"
                />
                <div class="info-box pad-l20">
                  <div class="info-name">{{ row.name }}</div>
                  <div class="info-tips mar-t16">{{ row.tips }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
            <template #default="{ row }">
              <div class="num-sty">{{ row.price }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="数量">
            <template #default="{ row }">
              <div class="num-sty">{{ row.number }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="coupon" label="普优惠金额">
            <template #default="{ row }">
              <div class="num-sty">{{ row.coupon }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="amountPayable" label="应付金额">
            <template #default="{ row }">
              <div class="num-sty num-sty-cor">{{ row.amountPayable }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="form-box mar-t20 ">
        <div class="form-tit pad20">订单联系人</div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          label-position="left"
        >
          <div class="pad20 mar-t10">
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人" prop="name">
                  <el-input v-model="ruleForm.name" class="w-460"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系邮箱" prop="email">
                  <el-input v-model="ruleForm.email" class="w-460"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="mobile">
                  <el-input v-model="ruleForm.mobile" class="w-460" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="备注留言" prop="remark">
                  <el-input v-model="ruleForm.remark" class="w-460"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      
    </div>
    <div class="fot-buy padtb30 padlr20 flex-a ju-bt mar-t20 min-w1280">
      <div class="buy-price flex-a">
        <div class="price-num mar-r30">总金额小计 ¥3,000.00</div>
        <div class="price-coupon">已优惠 ￥500.00</div>
      </div>
      <div class="buy-btn flex-a">
        <div class="btn-price">
          <span class="price-label mar-r10">应付金额</span>
          <span class="price-amount">
            <span class="payment-unit">¥</span>
            <span class="payment-amount">2500.00</span>
          </span>
        </div>
        <div class="btn-btns flex">
          <div class="mar-l20 btn btn1" @click="toPath('/shoppingTrolley')">
            加入购物车
          </div>
          <div class="mar-l20 btn btn2" @click="submitForm(ruleFormRef)">
            立即购买
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 立即购买
 */
import { ref } from "vue";
const router = useRouter();
const toPath = url => {
    if(!url) return
    router.push(url);
};
let tableData = ref([
  {
    image: "work-card4",
    name: "国内商标注册",
    tips: "普通注册",
    price: "¥2,500.00",
    number: "1",
    coupon: "¥500.00",
    amountPayable: "¥2,000.00",
  },
]);

const ruleForm = ref({
  name: "",
  email: "",
  mobile: "",
  remark: "",
});
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入联系人",
      trigger: "change",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入联系邮箱",
      trigger: "change",
    },
  ],
  mobile: [
    {
      required: true,
      message: "请输入联系电话",
      trigger: "change",
    },
  ],
});
const ruleFormRef = ref()
const submitForm = formEl => {
  console.log(formEl,12);
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.fot-buy {
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
  .buy-btn  {
    .btn-btns {
      .btn {
        width: 140px;
        height: 40px;
        border-radius: 2px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-family: PingFang TC, PingFang TC-Regular;
        font-weight: Regular;
        text-align: center;
      }
      .btn1 {
        border: 1px solid #0052d9;
        color: #0052d9;

      }
      .btn2 {
        background: #0052d9;
        color: #ffffff;
      }
    }
    .btn-price {
      .price-label {
        font-size: 16px;
        font-weight: Regular;
        text-align: left;
        color: #202020;
      }
      .price-amount {
        font-size: 28px;
        font-weight: Semibold;
        text-align: left;
        color: #ff4600;
        .payment-unit {
          font-size: 16px;
        }
      }
    }
  }
  .buy-price {
    .price-num {
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #202020;
    }
    .price-coupon {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #ff4600;
    }
  }
}
.form-box {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #d6dce0;
  border-radius: 2px;
  .form-tit {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #202020;
    height: 62px;
    background: #f4f6fa;
  }
}
.columnSty {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: Medium;
  text-align: left;
  color: #202020;
}
.table-box {
  // width: 1280px;
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 4px;
  .table-tit {
    font-size: 20px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: Semibold;
    text-align: left;
    color: #202020;
  }
  .info-box {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: Semibold;
    text-align: left;
    color: #181818;
  }
  .info-tips {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #575966;
  }
  .num-sty {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #202020;
  }
  .num-sty-cor {
    color: #ff4600;
  }
}
</style>
